<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";

export default {
  name: "vueX",
  data() {
    return {
      num: 100
    }
  },
  computed: {
    // state语法糖
    ...mapState({
      msg1: state => state.msg,
      /*msg:function(state){
        return state.msg
      }*/
      age:state => state.stateObj.age,
      num2: state => state.mine.mineNum
    }),
    // getters
    //使用语法糖第一种方式
    // ...mapGetters(['getCount','getMsg'])
    //使用语法糖第二种方式
    ...mapGetters({
      getCount1: 'getCount',
      // 自定义方法名：‘原方法名’
      getMsg1: 'getMsg'
    })

  },
  methods: {
    //   mutations语法糖
    // ...mapMutations(['setCount']),
    ...mapMutations({
      // 自定义方法名：‘原方法名’
      setCount1: 'setCount',
      setNum1: 'setMineNum',
      setNum2: 'mine/setMineNum',
    }),

    // actions的语法糖
    // ...mapActions(['setMsg']),
    ...mapActions({
      setMsgNew: 'setMsg'
    }),

    changeCount() {
      // commit(方法名,修改的值)
      // commit({type:方法名，参数：参数值})
      // this.$store.commit('setCount',200)
      // this.$store.commit('setCount',{abc:200})
      // this.$store.commit('setCount',[200])
      // this.$store.commit({
      //   type: 'setCount',
      //   abc: 200
      // })
      console.log(this.$store.state.count)
      // this.setCount1(300)
      //   actions
      //   dispatch(方法名,修改的值)
      // this.$store.dispatch('setMsg','这是actions修改的Msg')
      /*this.$store.dispatch({
        type: 'setMsg',
        msgNew: '这是actions修改的Msg'
      })*/
      // this.setMsg('这是actions修改的Msg')
      this.setMsgNew('这是actions修改的Msg')
      this.$store.commit('setMineNum',2000)
      // this.$store.commit('mine/setMineNum', 2000)  命名空间时使用

    },
  },
  created() {
    console.log(this.$store, '$store')
    // 获取state中的数据
    console.log(this.$store.state.msg)
    console.log(this.$store.state.stateObj.age)
    console.log(this.msg1,'msg1')
    console.log(this.age,'age')
    console.log(this.num)

    // getters
    //1.this.$store.getters.getCount
    //2.使用语法糖第一种方式
    // this.getCount
    // this.getMsg
    //3.使用语法糖第二种方式
    this.getCount1
    this.getMsg1
    // console.log( this.getCount)
    // console.log(this.$store.getters.getCount)

    //   mutations
    // this.$store.commit('setCount',200)
    console.log(this.$store.state.mine.mineNum)
    console.log(this.num2)
  }
}
</script>

<template>
  <div>
    {{ num }}
    {{ this.$store.state.msg }}
    {{msg1}}
    <p>{{ this.$store.state.count }}--count</p>
    <button @click="changeCount">修改count</button>
    {{ num2 }}--{{ $store.state.mine.mineNum }}
  </div>
</template>

<style scoped lang="less">

</style>